<template>
  <!-- 公司基本信息 -->
  <div class="company_info">
      <!-- 公司介绍 -->
      <div class="info-title">
          <span class="title-left">公司介绍</span>
      </div>
      <div class="info-detail border-bottom" >
          <p class="detail-p1" v-html="MInfo.introduction"></p>
      </div>
      <!-- 公司具体信息介绍 -->
     
      <!-- 公司地址 -->
      <div class="company-address ">
          <!-- title -->
          <div class="address-title title">
              公司地址
          </div>
          <!-- 位置信息  -->
          <div class="address-info border-bottom">
              <p>
                   <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dizhi2"></use>
                   </svg>
                   <span>{{MInfo.provinces}} {{MInfo.address}}</span>
              </p>
          </div>
      </div>
      <!-- 公司类型 -->
      <div class="company-type">
          <div class="title">
              公司标签
          </div>
          <div class="type-detail border-bottom">
                <p>
                    <span v-for="(tag ,index) in MInfo.Arr_tags" :key="index"> {{tag}}</span>
                </p>
          </div>
      </div>
  </div>
</template>

<script>
import { GetAbout } from "@/api/zgz";
export default {
  props: {
    id: Number
  },
  data() {
    return {
      MInfo:{}
    };
  },
  created() {
    this.initialization();
  },
  methods: {
    //初始化
    initialization() {
      this.$indicator.open();
      setTimeout(() => {
        GetAbout(this.id).then(res => {
          if (res.StatusCode === 200) {
            this.MInfo = res.Data;
            this.$indicator.close();
          }
        });
      }, 400);
    }
  }
};
</script>

<style lang="scss" scoped>
.company_info {
  padding-bottom: 60px;
}
// 公司标题
.title {
  height: 57.6px;
  width: 100%;
  line-height: 57.6px;
  padding-left: 12px;
  border-bottom: 1px solid #f4f4f4;
  font-size: 16px;
  color: #282828;
  font-weight: bolder;
}
.info-title {
  height: 58.3px;
  width: 100%;
  padding-left: 12px;
  border-bottom: 1px solid #eeeeee;
  overflow: hidden;
  .title-left {
    line-height: 58.3px;
    font-size: 16px;
    color: #282828;
    font-weight: #282828;
    display: inline-block;
    float: left;
    font-weight: bolder;
  }
  .title-right {
    display: inline-block;
    float: right;
    line-height: 58.3px;
    margin-right: 12px;
    font-size: 12px;
    color: #999999;

    > span {
      display: block;
      float: left;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 22px;
    }
  }
}
// 每个版块儿底边框设置
.border-bottom {
  border-bottom: 9px solid #f4f4f4;
}
// 公司具体信息介绍
.info-detail {
  width: 100%;
  padding: 20px 12px 22px 12px;
  > :first-child {
    font-size: 14px;
    color: #666666;
  }
  .detail-p2 {
    margin-top: 21px;
    font-size: 14px;
    color: #999999;
    overflow: hidden;
    > span {
      display: block;
      float: left;
      margin-left: 172.65px;
    }
    > .icon {
      display: block;
      float: left;
      margin-left: 9px;
      margin-top: 3px;
    }
  }
}
//
.info-detail2 {
  width: 100%;
  padding: 20px 12px 22px 12px;
  color: #999999;
  font-size: 12px;
  p {
    display: flex;
    align-items: center;
    .icon {
      margin-right: 8px;
    }
  }
  > :first-child {
    font-size: 12px;
    color: #282828;
    margin-bottom: 15px;
    // padding: 6px 0;
  }
  > :nth-child(2) {
    overflow: hidden;
    margin-bottom: 15px;
    > p {
      float: left;
      margin-right: 13px;
      > .icon {
        margin-top: 3px;
        display: block;
        float: left;
        margin-right: 8px;
      }
      > span {
        display: block;
        float: left;
      }
    }
  }
  > :nth-child(3) {
    overflow: hidden;
    margin-bottom: 15px;
    > .icon {
      margin-top: 3px;
      display: block;
      float: left;
      margin-right: 8px;
    }
    > span {
      display: block;
      float: left;
    }
  }
  > :nth-child(4) {
    line-height: 1.8;
    > :last-child {
      color: #3887fe;
    }
  }
}
// 公司地址
.company-address {
  // 地址详细信息
  .address-info {
    padding: 22px 12px;
    > :first-child {
      font-size: 14px;
      color: #282828;
      margin-bottom: 12px;
      overflow: hidden;
      .icon {
        color: #999999;
        display: block;
        float: left;
        margin-top: 3px;
        margin-right: 8px;
        font-size: 14px;
      }
      > span {
        display: block;
        float: left;
      }
    }
    > :last-child {
      color: #999999;
      font-size: 14px;
      overflow: hidden;
      > span {
        display: block;
        float: left;
      }
      .long {
        margin-right: 5px;
        margin-left: 22px;
      }
    }
  }
}
// 公司类型
.company-type {
  .type-detail {
    overflow: hidden;
    padding: 22px 12px;
    > p {
      > span {
        display: block;
        float: left;
        font-size: 14px;
        color: #fd4f00;
        padding: 3.5px 8.3px;
        border: 1px solid #fd4f00;
        margin-right: 10px;
        margin-bottom: 12px;
      }
    }
  }
}
// 项目案例
.project-example {
  .project-process {
    padding: 22px 12px;
    .process-p1 {
      font-size: 16px;
      overflow: hidden;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        overflow: hidden;
        margin-left: 12px;
        margin-bottom: 12px;
        color: #999999;
        .circle01 {
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #3887fe;
          margin-top: 3px;
          margin-right: 8.3px;
          background: white;
          position: absolute;
          left: 6.01px;
          margin-top: 3px;
        }
        > :nth-child(1) {
          display: block;
          float: left;
          color: #282828;
          line-height: 18px;
        }
        > :nth-child(2) {
          display: block;
          float: right;
          color: #666666;
          line-height: 15px;
        }
        .hidder02 {
          display: block;
          width: 2px;
          height: 3px;
          background: white;
          position: absolute;
          left: 11.01px;
        }
      }
    }
    .process-p2 {
      font-size: 14px;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle02 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -14px;
        }
      }
    }
    // 合作单位
    .process-p3 {
      font-size: 14px;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle03 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
    }
    // 项目图片
    .process-p4 {
      font-size: 14px;
      padding-bottom: 12px;
      border-left: 1px dashed #d6d6d6;
      overflow: hidden;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle04 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
      .img-box {
        margin-left: 12px;
        > div {
          display: block;
          width: 110.66px;
          height: 66.66px;
          float: left;
          margin-right: 13px;
          > img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
          }
        }
      }
    }
    // 展开
    .detail-p2 {
      margin-top: 21px;
      font-size: 14px;
      color: #999999;
      overflow: hidden;
      > span {
        display: block;
        float: left;
        margin-left: 172.65px;
      }
      > .icon {
        display: block;
        float: left;
        margin-left: 9px;
        margin-top: 2px;
      }
    }
  }
}
// 企业证书
.company-pt {
  padding-bottom: 22px;
  border-bottom: 36px solid #f4f4f4;
  margin-bottom: 48.6px;
  .pt-box {
    overflow: hidden;
    margin-left: 12px;
    margin-top: 22px;
    > div {
      width: 124.6px;
      height: 86px;
      float: left;
      margin-right: 8.3px;
      > img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
    }
  }
}
.company-pt {
  padding-bottom: 22px;
  border-bottom: 10px solid #f4f4f4;
  // 标题
  .pt-title {
    height: 58.3px;
    width: 100%;
    padding-left: 12px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;

    .title-left {
      line-height: 58.3px;
      font-size: 16px;
      color: #282828;
      font-weight: #282828;
      display: inline-block;
      float: left;
      font-weight: bolder;
    }
    .title-right {
      display: inline-block;
      float: right;
      line-height: 58.3px;
      margin-right: 12px;
      font-size: 12px;
      color: #999999;

      > span {
        display: block;
        float: left;
      }
      > .icon {
        display: block;
        float: left;
        margin-top: 22px;
      }
    }
  }
  .project-process {
    padding: 22px 12px;
    .process-p1 {
      overflow: hidden;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        overflow: hidden;
        margin-left: 12px;
        margin-bottom: 12px;
        color: #282828;

        > span {
          display: block;
          float: left;
          line-height: 19px;
          font-size: 16px;
          color: #282828;
          margin-left: 1px;
        }
        .circle01 {
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #3887fe;
          margin-top: 3px;
          margin-right: 8.3px;
          background: white;
          position: absolute;
          left: 5.01px;
          margin-top: 2px;
        }
        .fenge01 {
          width: 0px;
          height: 11.3px;
          border: 1px solid #7d8086;
          margin-top: 3.485px;
          margin-left: 14.6px;
          margin-right: 14.6px;
        }
        .hidder01 {
          display: block;
          width: 2px;
          height: 2px;
          background: white;
          position: absolute;
          left: 11.01px;
        }
      }
    }

    // 项目图片
    .process-p4 {
      font-size: 14px;
      padding-bottom: 12px;
      border-left: 1px dashed #d6d6d6;
      overflow: hidden;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      .hidder {
        width: 2px;
        height: 28px;
        background: white;
        display: block;
        position: absolute;
        left: 12px;
        margin-top: 55px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle04 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -16px;
        }
      }
      .img-box {
        margin-left: 12px;
        > div {
          display: block;
          width: 106px;
          height: 70.6px;
          float: left;
          margin-right: 12px;
          > img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
          }
        }
      }
    }
    // 展开
    .detail-p2 {
      margin-top: 21px;

      color: #999999;
      overflow: hidden;
      > span {
        display: block;
        float: left;
        margin-left: 172.65px;
        font-size: 14px;
      }
      > .icon {
        display: block;
        float: left;
        margin-left: 9px;
        margin-top: 3px;
      }
    }
  }
}
.process-p2 {
  padding-bottom: 23px !important;
}
</style>
